<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>场馆管理</el-breadcrumb-item>
      <el-breadcrumb-item>场地运动类型</el-breadcrumb-item>
    </el-breadcrumb>
  <div class="add">
      <el-button type="primary" @click="show = true;dialogTitle='添加运动类型'">添加场地运动类型</el-button>
  </div>
  <el-card>
      <el-table
          :data="productList"
          stripe
          border
          style="width: 100%">
          <el-table-column
              prop="name"
              label="商品名">
          </el-table-column>
          <el-table-column
              label="操作">
              <template slot-scope="scope">
                  <div>
                      <el-button type="primary" @click="changeCommodity(scope.row)">修改</el-button>
                      <el-button type="danger" @click="delCommodity(scope.row)">删除</el-button>
                  </div>
              </template>
          </el-table-column>
      </el-table>
  </el-card>

      <el-dialog :title="dialogTitle" :visible.sync="show" @close="()=>{resetForm('productForm')}">
          <el-form :model="productForm" :rules="productFormRules" ref="productForm">
              <el-form-item label="运动名称" prop="name">
                  <el-input v-model="productForm.name" autocomplete="off"></el-input>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="()=>{resetForm('productForm');show = false;}">取 消</el-button>
              <el-button type="primary" @click="addCommodity" :loading='loading'>确 定</el-button>
          </div>
      </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            typeList:[],
            loading:false,
            dialogTitle:'',
            show:false,
            productList:[],
            productForm: {
                name: ""
            },
            productFormRules: {
                name:[ { required: true, message: '请输入运动类型', trigger: 'blur' } ],
            },
        }
    },
    async created(){
        this.getComputed()
    },
    methods:{
        async getList(){
            const { data } = await this.$http.get('venue/goodsType')
            if (data.state !== 0) return this.$message.error(data.msg)
            this.typeList = data.result
        },
        async getComputed(){
            const { data } = await this.$http.get('venue/sport')
            if (data.state !== 0) {
            return this.$message.error(data.msg)
            }
            this.productList = data.result
        },
        addCommodity(){
            this.$refs['productForm'].validate(async (valid) => {
                if(!valid) return
                let model = this.dialogTitle == '添加运动类型' ? "post" : "put"
                this.loading = true
                const { data } = await this.$http[model]('venue/sport',this.productForm)
                this.loading = false
                this.show = false
                this.resetForm('productForm')
                this.getComputed()
                if (data.state !== 0) return this.$message.error(data.msg)
                return this.$message.success(this.dialogTitle == '添加运动类型' ? "添加成功" : "修改成功")
            })
        },
        changeCommodity(item){
            this.dialogTitle = "修改运动类型"
            this.show =true
            let obj = JSON.stringify(item)
            let itemInfo = JSON.parse(obj)
            this.productForm = itemInfo
        },
        delCommodity(item){
            this.$confirm('是否删除该类型', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                console.log(item)
                const { data } = await this.$http.delete('venue/sport',{data:{id:item.id}})
                this.getComputed()
                if (data.state !== 0) return this.$message.error(data.msg)
                return this.$message.success("删除成功")
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
      }
    }
}
</script>

<style scoped>
    .add{
        display: flex;
        justify-content: flex-end;
    }
    .add .el-button{
        margin-bottom: 10px;
    }
</style>